  <template>
    <div id="app">
      <div class="wrapper">
            <h3>学生录入系统</h3>
  <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="姓名" prop="username">
      <el-input v-model="ruleForm.username"></el-input>
    </el-form-item>
        <el-form-item label="年龄" prop="age">
      <el-input v-model="ruleForm.age"></el-input>
    </el-form-item>
      <el-form-item label="性别" prop="gender">
      <el-radio-group v-model="ruleForm.gender">
        <el-radio label="男"></el-radio>
        <el-radio label="女"></el-radio>
      </el-radio-group>
    </el-form-item>
  </el-form>
      <br/>
      <div>
        <el-button @click="adduser">增加用户</el-button>
      </div>
      <div> <h3>用户信息表</h3></div>
      <div class="showData">
          <el-table
      :data="list"
      style="width: 100%">
      <el-table-column
        label="姓名"
        width="180">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.row.u1 }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="年龄"
        width="120">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
                    <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.a1 }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
          <el-table-column
        label="性别"
        width="120">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
                      <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.g1 }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
      </div>
      </div>
    </div>
  </template>

  <script>
  export default {
    name: "App",
    data(){
            var checkAge = (rule, value, callback) => {
          if (!value) {
            return callback(new Error('年龄不能为空'));
          }
          setTimeout(() => {
            if (!Number.isInteger(value)) {
              callback(new Error('请输入数字值'));
            } else {
              if (value < 101) {
                callback(new Error('必须小于100岁'));
              } else {
                callback();
              }
            }
          }, 1000);
        };
      return {

        ruleForm:{
        username:"",
        age:20,
        gender:"男",
        },
        rules:{
            username: [
              { required: true, message: '请输入用户名', trigger: 'blur' },
              { min: 1, max: 20, message: '长度在 1 到 20 个字符', trigger: 'blur' }
            ],
            age: [
              { validator: checkAge, trigger: 'blur' }
            ],
            gender:  { required: true, message: '请选择性别', trigger: 'change' } 
        },
        list:[],
        options: [{
            value: '选项1',
            label: '男'
          }, {
            value: '选项2',
            label: '女',
            disabled: true
          }]
      }
    },
    methods:{
      adduser()
      {
        let u = this.ruleForm.username;
        let a = this.ruleForm.age;
        let g = this.ruleForm.gender
        if(u != "" && a >0 && g !="" ){
          let item = {u1:u,a1:a,g1:g}
          this.list.push(item);
          this.username = "";
          this.age=0;
          this.gender="男"
        }
        else {
          return 
        }
      }
    }
  };
  </script>

  <style>
  #app {
  }
  .wrapper{
    /* background-color: aqua; */
    width: 600px;
    margin: 0 auto;
  }
  </style>
